<template>
    <div style="padding: 20px; margin-left: 15px;">
        <!-- <h1>角色管理</h1> -->
        <!-- 头部分 -->
        <div class="top">
            <el-form :model="form">
                <el-form-item>
                    <el-input v-model="form.role" placeholder="请输入角色名称" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small">查询</el-button>
                    <el-button type="success" size="small" @click="$router.push('/add-privilege')">添加</el-button>
                    <el-button type="danger" size="small">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格部分 -->
        <div class="table">
          <el-table 
          :data="tableData" 
          border 
          style="width: 100%"
          :header-cell-style="{'text-align': 'center'}"
          :cell-style="{'text-align':'center'}">
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="date" label="角色名称"  />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button plain size="small" @click="isDialogVisible">分配权限</el-button>
                    <el-button type="success" size="small">修改</el-button>
                    <el-button type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页部分 -->
        <div class="paging">
          <PagingList></PagingList>
        </div>
        <!-- 详情弹出框 -->
        <div>
            <permission :dialogVisible="dialogVisible" @cancel='cancel' @really="really"></permission>
        </div>
    </div>
</template>

<script setup lang="ts">
    import {ref,reactive} from 'vue'
    import permission from '../../components/permission.vue'
    import PagingList from '../../components/common/paging.vue'

    // 详情
    let dialogVisible=<any>ref(false)
      
    // 点击按钮出现详情弹出框
    const isDialogVisible=()=>{
        dialogVisible.value=true
    }
    // 取消
    const cancel=(parms:boolean)=>{
        // console.log(parms)
        dialogVisible.value=parms
    }
    const really=(parms:boolean)=>{
        dialogVisible.value=parms
    }
    const form=reactive({
        role:''
    })
    // 表格
    const tableData = [
      {
        date: '经管负责人',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '部门负责人',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '经管负责人',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '部门负责人',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]
   
</script>

<style lang="scss" scoped>
    .top{
        margin-top: 15px;
       .el-form{
            display: flex;
            .el-input{
                width: 210px;
                height: 28px;
                margin-right: 10px;
            }
            .el-button{
                height: 28px;
            }
       }
    }
    .table{
      ::v-deep .el-table__cell{
        padding: 10px 0;
      }
      .el-button{
        padding: 7px 15px;
      }
    }
       
    .paging{
      margin-top: 20px;
      margin-right: 15px;
      .demo-pagination-block + .demo-pagination-block {
        margin-top: 10px;
      }
      .demo-pagination-block .demonstration {
        margin-bottom: 16px;
      }
    }
</style>